import React from 'react'
import withRedux from 'next-redux-wrapper'
import { bindActionCreators } from 'redux'
import { initTotalStore } from '../../store/store'
import { getUserInfo } from '../../store/user.redux'
import { reset, changeId } from '../../store/blog.redux'
import Head from '../../components/Head'
import Nav from '../../components/Nav/Nav'
import BlogLeft from '../../components/Blog/BlogLeft'
import BlogRight from '../../components/Blog/BlogRight'
import AntdLayout from '../../components/AntdLayout'

class blog extends React.Component {
    constructor(props) {
        super(props)
    }

    parseUrl(url) {
        let result = []
        if (url.indexOf("?") < 1) {
            return result
        }
        const query = url.split("?")[1]
        const queryArr = query.split("&")
        for (const item of queryArr) {
            let obj = {}
            const value = item.split("=")[1]
            const key = item.split("=")[0]
            obj[key] = value
            result.push(obj)
        }
        return result
    }

    componentDidMount() {
        this.props.getUserInfo()
        const result = this.parseUrl(window.location.href)
        if (result.length === 0 || result.length > 1) {
            this.props.reset()
        } else {
            const id = parseInt(result[0].title)
            this.props.changeId(id)
        }

    }

    render() {

        return (
            <AntdLayout>
                <div className="index">
                    <Head title="Blog" />
                    <Nav />
                    <div className="content">
                        <BlogLeft />
                        <BlogRight />
                    </div>
                    <style jsx>{`
                        .index {
                            height:100%;
                        }
                        .content {
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            display: flex;
                            min-height: 100%;
                        }
                    `}</style>
                </div>
            </AntdLayout>
        )
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        getUserInfo: bindActionCreators(getUserInfo, dispatch),
        reset: bindActionCreators(reset, dispatch),
        changeId: bindActionCreators(changeId, dispatch),
    }
}
export default withRedux(initTotalStore, null, mapDispatchToProps)(blog)